@import "../global.less";
@import "../font.less";
@import "icon.less";
@import "../color.less";
@import "../animate.less";

body {
    width: 5280px;
    height: 2430px;
    background: url(../../images/bg.jpg) no-repeat left top;
    background-size: cover;
}

.envpicker {
    width: 726px;
    height: 1326px;
    background: url(../../images/c-envpicker/bg-envpicker.png) no-repeat center center;
    padding-top: 39px;
    left: 120px;

    .envpicker-wrapper {
        backdrop-filter: blur(30px);
        width: 100%;
        height: calc(1326px - 39px);
    }

    .envpicker-header {
        padding: 24px 46px 25px 56px;

        .title {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            line-height: 60px;
            font-size: 42px;
            color: #FFF;
            font-family: 'ys';
            .icon{
                display: inline-block;
                width: 60px;
                height:60px;
                margin-right:30px;
                &.icon-time{
                    .bg-icon-time();
                }
                &.icon-season{
                    .bg-icon-season();
                }
                &.icon-calendar{
                    .bg-icon-calendar();
                }
                &.icon-weather{
                    .bg-icon-weather();
                }
            }
        }
    }

    .envpicker-body {
        padding: 0 56px 32px 56px;
        font-size: 32px;
        font-family: 'ali-m';

        &:after {
            content: '';
            width: 100%;
            display: block;
            background: -webkit-linear-gradient(left, #FFFFFF00, #FFFFFFFF, #FFFFFF00);

        }
    }
}

.sphere {
    position: fixed;
    z-index: 10;
    width: calc(458px + 636px);
    height: calc(680px + 240px);
    bottom: 0px;
    left: 0px;

    .sphere-pattern-wrapper {

        .sphere-layer {
            width: 680px;
            height: 680px;
            position: absolute;
            top: 0;
            left: 0;

            &.layer-1 {
                background: url(../../images/c-sphere/sphere-layer-1.png) no-repeat center center;
                animation: 25s rollingClockwise infinite;
            }

            &.layer-2 {
                background: url(../../images/c-sphere/sphere-layer-2.png) no-repeat center center;
                animation: 50s rollingClockwise reverse infinite;
            }

            &.layer-3 {
                background: url(../../images/c-sphere/sphere-layer-3.png) no-repeat center center;
                animation: 15s rollingClockwise infinite;
            }

            &.layer-4 {
                background: url(../../images/c-sphere/sphere-layer-4.png) no-repeat center center;
                animation: 60s rollingClockwise infinite;
            }

            &.layer-5 {
                background: url(../../images/c-sphere/sphere-layer-5.png) no-repeat center center;
                animation: 60s rollingClockwise infinite;
            }
        }
    }

    .menu {
        position: absolute;
        z-index: 11;
        left: 680px;
        bottom: 0px;
        height: calc(858px + 124px);
        width: calc(140px + 468px);

        span.ivu-radio {
            display: none;
        }

        .ivu-radio-group {
            position: relative;

            &>.ivu-radio-group-item {
                display: block;
                display: flex;
                flex-flow: row nowrap;
                position: relative;
                width: 158px;
                height: 158px;

                .icon-wrapper {
                    width: 158px;
                    height: 158px;
                    padding: 12px;
                    transition: .3s;

                    .icon {
                        width: 124px;
                        height: 124px;
                        display: block;
                        transition: .3s;

                        &.icon-menu-overall {
                            .bg-icon-menu-overall-normal();
                        }

                        &.icon-menu-ecology {
                            .bg-icon-menu-ecology-normal();
                        }

                        &.icon-menu-construction {
                            .bg-icon-menu-construction-normal();
                        }

                        &.icon-menu-landscape {
                            .bg-icon-menu-landscape-normal();
                        }

                        &.icon-menu-management {
                            .bg-icon-menu-management-normal();
                        }
                    }
                }

                .menu-content {
                    width: 0;
                    overflow: hidden;
                    transition: 0.3s;
                    margin-left: -15px;
                    padding-left: 32px;
                    padding-top: 32px;

                    .title {
                        font-family: 'ys';
                        font-weight: 300;
                        font-size: 56px;
                        line-height: 56px;
                        color: #FFF;
                    }

                    .subtitle {
                        font-family: 'ali';
                        font-size: 28px;
                        line-height: 28px;
                        color: #FFF;
                    }
                }

                &.ivu-radio-wrapper-checked {
                    width: 515px;
                    height: 158px;

                    .icon-wrapper {
                        background: rgba(0, 0, 0, 0.1);
                        width: 158px;
                        height: 158px;
                        border-radius: 158px;
                        backdrop-filter: blur(50px);
                        border: 2px #fff solid;
                        padding: 14px;

                        .icon {

                            &.icon-menu-overall {
                                .bg-icon-menu-overall-actived();
                            }

                            &.icon-menu-ecology {
                                .bg-icon-menu-ecology-actived();
                            }

                            &.icon-menu-construction {
                                .bg-icon-menu-construction-actived();
                            }

                            &.icon-menu-landscape {
                                .bg-icon-menu-landscape-actived();
                            }

                            &.icon-menu-management {
                                .bg-icon-menu-management-actived();
                            }
                        }
                    }

                    .menu-content {
                        background: url(../../images/c-sphere/menu-actived-text-bg.png) no-repeat center left;
                        width: 332px;
                        height: 154px;
                    }
                }

                &:nth-child(1) {
                    left: calc(0px - 124px);
                    top: -25px;
                }

                &:nth-child(2) {
                    left: calc(30px - 62px);
                }

                &:nth-child(3) {
                    top: 25px;
                    left: 30px;
                }

                &:nth-child(4) {
                    left: calc(30px - 62px);
                    top: 50px;
                }

                &:nth-child(5) {
                    left: calc(0px - 124px);
                    top: 75px;
                }
            }
        }

    }

}

.top {
    width: 528px;
    height: auto;
    position: fixed;
    top: 35px;
    left: 55px;
    z-index: 30;

    .logo {
        width: 528px;
        height: 181px;
        background: url(../../images/c-top/logo.png) no-repeat top left;
    }

    .extra {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        height: 60px;

        .item {
            padding: 0 12px;
            border-right: 5px rgba(255, 255, 255, 0.7) solid;
            height: 36px;
            flex-grow: 1;
            flex-shrink: 1;
            text-align: center;

            .text {
                font-family: 'borda';
                font-size: 36px;
                color: #FFF;
                line-height: 36px;
            }

            .icon {
                display: inline-block;
                width: 32px;
                height: 32px;
                margin: 0 6px 0 0;
                background-size: contain;

                &.icon-weather-sunny {
                    .bg-icon-weather-sunny-actived();
                }

                &.icon-weather-darken {
                    .bg-icon-weather-darken-actived();
                }

                &.icon-weather-cloudy {
                    .bg-icon-weather-cloudy-actived();
                }

                &.icon-weather-fog {
                    .bg-icon-weather-fog-actived();
                }

                &.icon-weather-little-rainy {
                    .bg-icon-weather-little-rainy-actived();
                }

                &.icon-weather-medium-rainy {
                    .bg-icon-weather-medium-rainy-actived();
                }

                &.icon-weather-heavy-rainy {
                    .bg-icon-weather-heavy-rainy-actived();
                }

                &.icon-weather-haze {
                    .bg-icon-weather-haze-actived();
                }

                &.icon-weather-little-snowy {
                    .bg-icon-weather-little-snowy-actived();
                }

                &.icon-weather-medium-snowy {
                    .bg-icon-weather-medium-snowy-actived();
                }

                &.icon-weather-heavy-snowy {
                    .bg-icon-weather-heavy-snowy-actived();
                }

                &.icon-weather-blizzard {
                    .bg-icon-weather-blizzard-actived();
                }

                &.icon-arrow-up {
                    .bg-icon-arrow-up();
                }

                &.icon-arrow-down {
                    .bg-icon-arrow-down();
                }
            }
        }
    }
}

.toolbar {
    position: fixed;
    bottom: 100px;
    left: 1000px;
    z-index: 10;
    display: flex;
    flex-flow: nowrap row;
    justify-content: space-evenly;
    align-items: center;

    .ivu-tooltip-popper {
        .ivu-tooltip-content {
            position: relative;
            bottom: 20px;
        }

        .ivu-tooltip-inner {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(30px);
            color: #929292;
            font-family: 'ys';
            font-size: 38px;
            padding: 0;
            width: 120px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            box-shadow: none;
        }

        .ivu-tooltip-arrow {
            bottom: -18px;
            border-width: 30px 20px 0;
            border-top-color: rgba(255, 255, 255, 0.9);
            margin-left: -20px;
        }
    }

    .item {
        padding: 0 32px;

        .btn {
            width: 100px;
            height: 100px;
            transition: .3s;
            cursor: pointer;

            .icon {
                width: 100%;
                height: 100%;

                &.icon-open-sphere {
                    .bg-icon-open-sphere-normal();
                }

                &.icon-close-sphere {
                    .bg-icon-close-sphere-normal();
                }

                &.icon-setting {
                    .bg-icon-setting-normal();
                }

                &.icon-home {
                    .bg-icon-home-normal();
                }
            }
        }

        &:active {
            .icon {
                &.icon-open-sphere {
                    .bg-icon-open-sphere-actived();
                }

                &.icon-close-sphere {
                    .bg-icon-close-sphere-actived();
                }

                &.icon-setting {
                    .bg-icon-setting-actived();
                }

                &.icon-home {
                    .bg-icon-home-actived();
                }
            }
        }
    }
}


.right {
    position: fixed;
    z-index: 10070;
    width: 1008px;
    right: 60px;
    bottom: 0;
    top: 0;
    perspective-origin: right center;
    perspective: 2000px;
    padding: 48px 0;
}

.row {
    width: 1008px;
    transform: rotateY(-7deg);
    margin-bottom: 20px;

    &::before {
        display: block;
        width: 1008px;
        height: 12px;
        position: relative;
        top: 12px;
        background: url(../../images/c-row/bg-row-before.png) no-repeat top center;
        content: '';
    }

    &::after {
        display: block;
        width: 1008px;
        height: 12px;
        position: relative;
        background: url(../../images/c-row/bg-row-after.png) no-repeat top center;
        content: '';
    }

}

.box {
    width: 960px;
    display: flex;
    flex-flow: column;
    border-radius: 10px;
    background: -webkit-linear-gradient(top, #00000010, #00000020);
    backdrop-filter: blur(40px);
    margin-left: 24px;

    // transform:rotateX(80deg);

    .box-header {
        display: flex;
        flex-flow: nowrap row;
        flex-grow: 0;
        flex-shrink: 0;
        background: url(../../images/c-box/bg-box-header.png) no-repeat top left;
        width: 540px;
        height: 72px;
        padding-left: 46px;

        .title {
            font-size: 54px;
            color: #fff;
            letter-spacing: 5.8px;
            font-family: 'ys';
        }
    }

    .box-body {
        align-items: stretch;
        flex-grow: 1;
        flex-shrink: 1;
        height: 390px;

        .dtable {
            width: 100%;
            border: 0;
            border-collapse: collapse;

            td {
                font-size: 12px;
                text-align: center;
            }
        }

        &.train {
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;

            .item {
                flex-grow: 1;
                flex-shrink: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-around;
            }
        }

        &.tower {
            display: block;
            justify-items: stretch;
        }

        .article {
            img {
                width: 100%;
            }

            p {
                text-indent: 2em;
                line-height: 2em;
            }
        }
    }
}

.panel {
    position: fixed;
    /* bottom: 130px;
    right: 520px; */
    height: auto;
    z-index: 10076;

    .item {}

    input[type="checkbox"],
    input[type="radio"] {
        display: none;

        &+.btn {
            cursor: pointer;
            transition: 0.4s;
            display: block;
        }
    }

    .text {}

    .icon {}


    &.day {
        input+.btn {
            .text {
                color: #121317;
            }
        }

        input:checked+.btn {
            .text {
                color: #ffffff
            }
        }
    }

    &.night {
        input+.btn {
            .text {
                color: #ffffff;
            }
        }

        input:checked+.btn {
            .text {
                color: #ffffff
            }
        }
    }

}

.chart-wrapper {
    &.day {
        .card {
            .text {
                color: #121315
            }

            .number {
                color: #121315;
            }

            small {
                color: #121315;
            }
        }
    }

    &.night {
        .card {
            .text {
                color: #fff;
            }

            .number {
                color: #fff;

            }

            small {
                color: #fff;
            }
        }
    }
}

.card {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;

    .card-head {
        width: auto;
        height: auto;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .card-body {
        flex-grow: 1;
        flex-shrink: 1;
    }

    .icon {
        &::before {}
    }

    .text {
        display: block;
        text-align: center;

        &+div {
            text-align: center;
        }
    }

    .number {
        small {}
    }
}

.dtable {
    thead {
        td {
            text-shadow: 0 3px 7px #00000077;
            color: #fff;
        }
    }

    tbody tr:nth-child(2n) {}
}